// import React from 'react';
// import {Form, Input, Button, Select, Modal, message,} from 'antd';
// import axios from "axios"
// import {ExclamationCircleOutlined} from "@ant-design/icons";
// const { confirm } = Modal;
//
// class Addproduct extends React.Component {
//     constructor() {
//         super();
//         this.state = {
//             data:{
//                 name:'',
//                 unit:'',
//                 price:0,
//                 code:'',
//                 classone:"",
//                 classtwo:" ",
//                 stock:0
//             }
//
//         };
//     }

//
//
//
//
//
//
//
//
//     }
//     //表格变化
//    change=()=>{
//        this.setState({
//            data:{
//                name:'',
//                unit:'',
//                price:0,
//                code:'',
//                classone:"",
//                classtwo:" ",
//                stock:0
//            }
//        })
//    }
//
//
//     render() {
//        let {data}=this.state
//
//
//         return (
//             <div>
//                 <Form
//                     labelCol={{span: 4,}}
//                     wrapperCol={{span: 6,}}
//                     layout="horizontal"
//                     size="middle"
//                 >
//                     <Form.Item label="* 商品条码" >
//                         <Input placeholder="请输入条码" />
//                     </Form.Item>
//                     <Form.Item label="* 商品名称">
//                        <Input placeholder="请输入商品名称"  />
//                    </Form.Item>
//                     <Form.Item label="* 请选择一级类别">
//                         <Select >
//                             <Select.Option value="日常用品">日常用品</Select.Option>
//                             <Select.Option value="玩具">玩具</Select.Option>
//                             <Select.Option value="饮料酒水">饮料酒水</Select.Option>
//                             <Select.Option value="饰品">饰品</Select.Option>
//                             <Select.Option value="家居">家居</Select.Option>
//                         </Select>
//                     </Form.Item>
//                     <Form.Item label="* 请选择二级类别">
//                         <Select>
//                             <Select.Option value="洗漱品">洗漱品</Select.Option>
//                             <Select.Option value="棋牌">棋牌</Select.Option>
//                             <Select.Option value="积木">积木</Select.Option>
//                             <Select.Option value="口罩">口罩</Select.Option>
//                         </Select>
//                     </Form.Item>
//                     <Form.Item label="* 请选择商品单位">
//                         <Select >
//                             <Select.Option value="包">包</Select.Option>
//                             <Select.Option value="套">套</Select.Option>
//                             <Select.Option value="件">件</Select.Option>
//                             <Select.Option value="个">个</Select.Option>
//                         </Select>
//                     </Form.Item>
//                     <Form.Item label="* 请输入售价">
//                         <Input  placeholder="请输入售价" />
//                     </Form.Item>
//                     <Form.Item label="请输入数量">
//                         <Input placeholder="请输入数量" />
//                     </Form.Item>
//                     <div style={{width:"50%",display:'flex', justifyContent:"space-around"}}>
//                         <Button type="primary" htmlType="submit" onClick={this.submit}>
//                             提交
//                         </Button>
//                         <Button  htmlType="reset">
//                             重置
//                         </Button>
//                     </div>
//                 </Form>
//             </div>
//         );
//     }
// }


import React, {useState, useEffect} from 'react';

import {Form, Input, Button, Select, Modal, message,} from 'antd';
import axios from "axios"
import {ExclamationCircleOutlined} from "@ant-design/icons";
const { confirm } = Modal;


const Addproduct = () => {

        const [form] = Form.useForm();
        const [, forceUpdate] = useState(); // To disable submit button at the beginning.

        useEffect(() => {
            forceUpdate({});
        }, []);

        const onFinish = values => {
            console.log('Finish:', values);
        };



    //提交事件
       const  mysubmit=()=> {
        confirm({
            title: '提示?',
            icon: <ExclamationCircleOutlined/>,
            content: '你确定要提交吗?',
            okText: '确定',
            okType: 'primary',
            cancelText: '取消',
            onOk() {


                axios({
                    url: 'http://123.57.67.148:3000/mock/249/upProduct',
                    method: 'post'
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code === 200) {
                        message.success('提交成功');
                    } else {
                        message.error('提交失败！');
                    }
                })

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    return (
        <Form form={form}
              name="addproduct"
              onFinish={onFinish}
              labelCol={{span: 4,}}
              wrapperCol={{span: 6,}}
              layout="horizontal"
              size="middle">
            <Form.Item
                label="商品条码"
                name="code"
                rules={[
                    {
                        required: true,
                        message: '请输入条码',
                    },
                ]}
            >
                <Input placeholder="请输入条码"/>
            </Form.Item>
            <Form.Item
                label="商品名称"
                name="name"
                rules={[
                    {
                        required: true,
                        message: '请输入商品名称',
                    },
                ]}
            >
                <Input placeholder="请输入商品名称"/>
            </Form.Item>
            <Form.Item label="请选择一级类别"

                       name="classone"
                       rules={[
                           {
                               required: true,
                               message: '请选择一级类别',
                           },
                       ]}
            >
                <Select>
                    <Select.Option value="日常用品">日常用品</Select.Option>
                    <Select.Option value="玩具">玩具</Select.Option>
                    <Select.Option value="饮料酒水">饮料酒水</Select.Option>
                    <Select.Option value="饰品">饰品</Select.Option>
                    <Select.Option value="家居">家居</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="请选择二级类别"
                       name="classtwo"
                       rules={[
                           {
                               required: true,
                               message: '请选择二级类别',
                           },
                       ]}>
                <Select>
                    <Select.Option value="洗漱品">洗漱品</Select.Option>
                    <Select.Option value="棋牌">棋牌</Select.Option>
                    <Select.Option value="积木">积木</Select.Option>
                    <Select.Option value="口罩">口罩</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="请选择商品单位"
                       name="unit"
                       rules={[
                           {
                               required: true,
                               message: '请选择商品单位',
                           },
                       ]}>

                <Select>
                    <Select.Option value="包">包</Select.Option>
                    <Select.Option value="套">套</Select.Option>
                    <Select.Option value="件">件</Select.Option>
                    <Select.Option value="个">个</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="请输入售价"
                       name="price"
                       rules={[
                           {
                               required: true,
                               message: '请输入售价',
                           },
                       ]}>

                <Input placeholder="请输入售价"/>
            </Form.Item>
            <Form.Item label="请输入数量"
                       name="number"
                       rules={[
                           {
                               required: true,
                               message: '请输入数量',
                           },
                       ]}>

                <Input placeholder="请输入数量"/>
            </Form.Item>


            <Form.Item shouldUpdate style={{width:"100%",display:'flex', justifyContent:"center"}}>
                {() => (
                    <div style={{width:"50%",display:'flex', justifyContent:"space-around"}}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            disabled={
                                !form.isFieldsTouched(true) ||
                                form.getFieldsError().filter(({errors}) => errors.length).length
                            }
                            onClick={mysubmit}
                        >
                            提交
                        </Button>

                        <Button  htmlType="reset">
                            重置
                        </Button>

                    </div>



                )}
            </Form.Item>
        </Form>
    );
};

export default Addproduct


